<template>
  <el-container>
    <!-- 头部开始 -->
    <el-header> 
        <section>
          <i class="el-icon-s-fold"><span>订单管理</span></i> 
        </section>      
        <section>
          <i class="el-icon-search"></i>
          <i class="el-icon-bell">
            <img src="../assets/u28.jpg"> 
              <span>{{this.$store.state.loginName}}</span>
          </i>     
      </section>
    </el-header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <el-main>
      <div class="main-box">
        <!-- 选择校区 -->
        <div class="main-campus">
          <pre>校   区 :</pre>
          <el-select v-model="value" placeholder="宝安校区" class="area">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 订单统计 -->
        <div class="main-item">
          <!-- 课程订单 -->
          <div class="main-item-class">
            <div class="item-class-title">
              <p class="title-name">课程订单</p>
              <img src="../assets/u12549.png" />
            </div>
            <div class="item-class-msg">
              <div class="class-msg-left">
                <p>8,846</p>
                <p>订单总金额(元)</p>
                <img src="../assets/u12550.png" />
              </div>
              <div class="class-msg-right class-msg-left">
                <p>289</p>
                <p>订单总数(条)</p>
                <img src="../assets/u12550.png" />
              </div>
            </div>
            <div class="item-class-bottom">
              <p>
                昨日订单总金额：
                <i>6758</i> 元
              </p>
              <p>
                昨日订单总数：
                <i>267</i> 条
              </p>
            </div>
          </div>
          <!-- 商品订单 -->
          <div class="main-item-class">
            <div class="item-class-title">
              <p class="title-name">课程订单</p>
              <img src="../assets/u12549.png" />
            </div>
            <div class="item-class-msg">
              <div class="class-msg-left">
                <p>8,846</p>
                <p>订单总金额(元)</p>
                <img src="../assets/u12550.png" />
              </div>
              <div class="class-msg-right class-msg-left">
                <p>289</p>
                <p>订单总数(条)</p>
                <img src="../assets/u12550.png" />
              </div>
            </div>
            <div class="item-class-bottom">
              <p>
                昨日订单总金额：
                <i>6758</i> 元
              </p>
              <p>
                昨日订单总数：
                <i>267</i> 条
              </p>
            </div>
          </div>
          <!-- 账户订单 -->
          <div class="main-item-class">
            <div class="item-class-title">
              <p class="title-name">课程订单</p>
              <img src="../assets/u12549.png" />
            </div>
            <div class="item-class-msg">
              <div class="class-msg-left">
                <p>8,846</p>
                <p>订单总金额(元)</p>
                <img src="../assets/u12550.png" />
              </div>
              <div class="class-msg-right class-msg-left">
                <p>289</p>
                <p>订单总数(条)</p>
                <img src="../assets/u12550.png" />
              </div>
            </div>

            <div class="item-class-bottom">
              <p>
                昨日订单总金额：
                <i>6758</i> 元
              </p>
              <p>
                昨日订单总数：
                <i>267</i> 条
              </p>
            </div>
          </div>
          <div class="main-item-class">
            <div class="item-class-title">
              <p class="title-name">课程订单</p>
              <img src="../assets/u12549.png" />
            </div>
            <div class="item-class-msg">
              <div class="class-msg-left">
                <p>8,846</p>
                <p>订单总金额(元)</p>
                <img src="../assets/u12550.png" />
              </div>
              <div class="class-msg-right class-msg-left">
                <p>289</p>
                <p>订单总数(条)</p>
                <img src="../assets/u12550.png" />
              </div>
            </div>

            <div class="item-class-bottom">
              <p>
                昨日订单总金额：
                <i>6758</i> 元
              </p>
              <p>
                昨日订单总数：
                <i>267</i> 条
              </p>
            </div>
          </div>
        </div>
        <!-- 订单列表 -->
        <div class="main-list">
          <div class="main-list-tab">
            <ul>
              <router-link to="/finance-item1" tag="li">课程订单</router-link>
              <router-link to="/finance-item2" tag="li">商品订单</router-link>
              <router-link to="/finance-item3" tag="li">账户订单</router-link>
              <router-link to="/finance-item4" tag="li" class="active">已删除订单</router-link>
            </ul>
            <div class="list-tab-btns">
              <button class="isActive">课程订单</button>
              <button>商品订单</button>
              <button>账户订单</button>
            </div>
          </div>
          <div class="main-list-content">
            <div class="list-con-select">
              <div class="select-box">
                <em>充值途径：</em>
                <el-select v-model="value1" placeholder="全部种类" class="allkinds">
                  <el-option
                    v-for="item in options1"
                    :key="item.value1"
                    :label="item.label"
                    :value="item.value1"
                  ></el-option>
                </el-select>
              </div>
              <div class="select-box">
                <div class="block">
                  <em>交易日期：</em>
                  <el-date-picker
                    v-model="value6"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                  ></el-date-picker>
                </div>
              </div>
              <div class="select-box">
                <em>搜索：</em>
                <el-select v-model="value3" placeholder="学员" class="selected1">
                  <el-option
                    v-for="item in options3"
                    :key="item.value3"
                    :label="item.label"
                    :value="item.value3"
                  ></el-option>
                </el-select>
                <el-input v-model="input" placeholder="请输入内容" class="search"></el-input>
                <i class="el-icon-search search-btn"></i>
              </div>
            </div>
            <div class="list-con-msg">
              <ul>
                <li>
                  订单数目：
                  <em style="color:rgb(24,144, 255);">189 </em>条
                </li>
                <li>
                  充值总额：
                  <em>2345 </em>元
                </li>
              </ul>
              <button>导出订单</button>
            </div>
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100% height:100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection"></el-table-column>
              <el-table-column label="订单编号">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column prop="name" label="学员姓名"></el-table-column>
              <el-table-column prop="courseTitle" label="课程名称"></el-table-column>
              <el-table-column prop="price" label="金额"></el-table-column>
              <el-table-column prop="discount" label="优惠"></el-table-column>
              <el-table-column prop="signedAmount" label="签单金额"></el-table-column>
              <el-table-column prop="paid" label="实收"></el-table-column>
              <el-table-column prop="finalPayment" label="尾款"></el-table-column>
              <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
              <el-table-column prop="paymentMethod" label="支付方式"></el-table-column>
              <el-table-column prop="purchaseSource" label="购买来源"></el-table-column>
              <el-table-column prop="transactionHour" label="交易时间"></el-table-column>
            </el-table>
            <div class="list-con-pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <!-- 内容结束 -->
  </el-container>
</template>
<script>
export default {
  name: "finance-item4",
  data() {
    return {
      input: "",
      options: [
        {
          value: "选项1",
          label: "宝安校区",
        },
        {
          value: "选项2",
          label: "南山校区",
        },
        {
          value: "选项3",
          label: "福田校区",
        },
        {
          value: "选项4",
          label: "罗湖校区",
        },
        {
          value: "选项5",
          label: "盐田校区",
        },
      ],
      value: "", //校区
      options1: [
        {
          value1: "选项1",
          label: "校方充值",
        },
        {
          value1: "选项2",
          label: "个人充值",
        },
        {
          value1: "选项3",
          label: "退费转入",
        },
      ],
      value1: "", //订单种类
      options3: [
        {
          value3: "选项1",
          label: "学员",
        },
        {
          value3: "选项2",
          label: "学员1",
        },
        {
          value3: "选项3",
          label: "学员2",
        },
      ],
      value3: "", //搜索
      value6: "", //交易日期
      tableData: [],
      multipleSelection: [],
      // 分页器
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
      
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
   mounted(){
     this.$axios
        .get("/app/mock/264777/example/1598250282720")
        .then((res) => {
          this.tableData = res;
        })
        .catch((err) => console.log(err));
  },
};
</script>
<style scoped>
/* 清除默认样式 */
ul {
  list-style: none;
}
em,
i {
  font-style: normal;
}
input {
  outline: none;
}
/* 头部开始 */
.el-header{
  display: flex;
  justify-content: space-between;
  line-height: 65px !important;
  color: #5A5A5A;
}
.el-header img{
  width: 26px;
  height: 26px;
  margin-left: 8px;
}
.el-header span{
  font-size: 14px;
  margin-left: 10px;
  margin-top: -10px !important;
}
.el-header i{
  margin-right: 20px;
}
/* 头部结束 */
/* 内容开始 */
.main-box {
  width: 1200px;
}
.main-campus {
  width: 1200px;
  height: 60px;
  /* background:#fff; */
  position: relative;
}
.main-campus pre {
  position: absolute;
  right: 280px;
  top: 14px;
  font-size: 14px;
  color: #242425;
}
.main-campus .area {
  position: absolute;
  right: 0;
  top: 0;
  width: 272px;
  height: 40px;
}
/* 订单 */
.main-item {
  width: 1200px;
  height: 230px;
}
.main-item-class {
  width: 292px;
  height: 230px;
  background: #fff;
  position: relative;
  float: left;
  margin-right: 8px;
}
/* .main-item-class:nth-child(2) {
  margin: 0 18px;
} */
.main-item-class .item-class-title {
  width: 100%;
  height: 46px;
}
.item-class-title .title-name {
  font-size: 16px;
  color: #979797;
  line-height: 46px;
  margin-left: 10px;
}
.item-class-title img {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 14px;
  top: 14px;
}
.item-class-msg {
  width: 100%;
  height: 122px;
  border-bottom: 1px solid #e9e9e9;
}
.class-msg-left {
  width: 50%;
  height: 100%;
  text-align: center;
  padding-top: 10px;
  float: left;
}
.class-msg-left p:first-child {
  font-size: 20px;
  color: #272727;
}
.class-msg-left p:nth-child(2) {
  font-size: 14px;
  color: #272727;
  margin-top: 10px;
  margin-bottom: 15px;
}
.class-msg-left img {
  width: 139px;
  height: 30px;
}
.item-class-bottom {
  width: 100%;
  height: 62px;
  padding-top: 10px;
}
.item-class-bottom p {
  font-size: 14px;
  color: #5f5f5f;
  margin-left: 10px;
}
.item-class-bottom p:nth-child(2) {
  margin-left: 14px;
}
/* 订单列表 */
.main-list {
  width: 1200px;
  height: 625px;
  /* background: orange; */
  margin-top: 20px;
}
.main-list-tab {
  width: 100%;
  height: 120px;
  border-bottom: #f2f2f2;
}
.main-list-tab ul {
  width: 100%;
  height: 48px;
}
.main-list-tab li {
  float: left;
  margin: 0 16px;
  width: 90px;
  line-height: 45px;
  font-size: 14px;
  color: #5f5f5f;
  text-align: center;
  border-bottom: 1px solid rgb(233, 233, 233);
}
.list-tab-btns {
  width: 100%;
  height: 72px;
}
.list-tab-btns button {
  width: 89px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  color: #ffffff;
  text-align: center;
  margin-top: 20px;
  margin-right: 4px;
  cursor: pointer;
  outline: none;
  background: rgb(201, 201, 201);
}
.list-tab-btns .isActive {
  background: rgb(161, 161, 161);
}
.main-list-tab .active {
  color: rgb(24, 144, 255);
  border-bottom: 2px solid rgb(24, 144, 255);
}
.main-list-content {
  width: 1200px;
  height: 100%;
}
.list-con-select {
  width: 100%;
  height: 60px;
  position: relative;
}
.select-box {
  height: 35px;
  padding-top: 10px;
  float: left;
  margin-bottom: 10px;
}
.select-box em {
  font-size: 14px;
  color: #272727;
  margin-left: 20px;
  margin-right: 5px;
}
.select-box .allkinds {
  width: 273px !important;
  height: 32px !important;
  position: static !important;
}
.selected1 {
  width: 80px;
  position: static !important;
}
.search {
  width: 222px;
}
.search-btn {
  position: absolute;
  right: 20px;
  top: 24px;
  font-size: 14px;
  color: #c7c7c7;
}
.list-con-msg {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.list-con-msg ul {
  display: flex;
  width: 980px;
}
.list-con-msg ul li {
  font-size: 14px;
  color: #333333;
  margin: 18px 20px;
}
.list-con-msg button {
  width: 89px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  color: #ffffff;
  text-align: center;
  margin-top: 4px;
  cursor: pointer;
  outline: none;
}
.list-con-msg button:nth-child(2) {
  background: #bcbcbc;
}
.list-con-title {
  width: 1197px;
  height: 54px;
  border-color: #e8e8e8;
  border-radius: 4px;
  background: #fafafa;
  display: flex;
  align-items: center;
}
.list-con-title input {
  margin-left: 5px;
  margin-top: 10px;
}
.list-con-title p {
  font-size: 14px;
  color: #272727;
  margin-left: 30px;
  margin-right: 9px;
}
.list-con-items {
  width: 100%;
}
.con-items-box {
  width: 100%;
  height: 72px;
  display: flex;
  line-height: 72px;
  border-bottom: 1px solid #e8e8e8;
}
.con-items-box input {
  margin-top: 30px;
  margin-left: 10px;
}
.list-con-items p {
  margin-left: 20px;
  margin-right: 16px;
  font-size: 14px;
  color: #666666;
}
.list-con-items .somebtn em {
  color: #ff0000;
}
.list-con-pagination{
  width: 100%;
  height: 52px;
  background-color: #fff;
  margin-top: 20px;
}
.el-pagination{
  width: 530px;
  float: right;
}
/* 内容结束 */
</style>
